<template>
	<div class="system-dept-container">
		<div style="width: 35%; float: left">
			<!-- 查询条件-->
			<el-card shadow="hover">
				<div class="system-dept-search mb15">
					<el-input size="small" placeholder="请输入模块名称" style="max-width: 180px" v-model="moduleData.params.moduleName" />
					<el-button size="small" type="primary" class="ml10" @click="initModuleData">
						<el-icon>
							<elementSearch />
						</el-icon>
						查询
					</el-button>
				</div>
			</el-card>
			<!--分割线-->
			<el-divider></el-divider>
			<!--数据展示和分页-->
			<el-card shadow="never">
				<template #header>
					<div class="card-header">
						<span>模块列表</span>
						<!--新增等操作区域-->
						<el-button size="small" type="success" class="ml10" @click="openAddWindows">
							<el-icon>
								<elementDocumentAdd />
							</el-icon>
							新增模块
						</el-button>
					</div>
				</template>
				<!--表格展示区-->
				<el-table :data="moduleData.data" style="width: 100%" @row-dblclick="rowClick">
					<el-table-column prop="moduleName" label="模块名称" show-overflow-tooltip align="center" />
					<el-table-column align="center" label="是否必选" prop="mandatory" show-overflow-tooltip>
						<template #default="scope">
							<el-tag :type="scope.row.mandatory ? 'success' : 'info'">{{ scope.row.mandatory ? '是' : '否' }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" show-overflow-tooltip width="140">
						<template #default="scope">
							<el-button size="mini" type="text" @click="openEditWindow(scope.row)">修改</el-button>
							<el-popconfirm
								confirm-button-text="删除"
								cancel-button-text="取消"
								icon-color="red"
								title="确定删除这条记录吗？"
								@confirm="delRow(scope.row)"
							>
								<template #reference>
									<el-button size="mini" type="text">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<!--分页-->
				<el-pagination
					@size-change="dictTableOnHandleSizeChange"
					@current-change="dictTableOnHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30]"
					v-model:current-page="moduleData.params.pageNo"
					background
					v-model:page-size="moduleData.params.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="moduleData.total"
				>
				</el-pagination>
			</el-card>
		</div>
		<div style="width: 64%; float: right">
			<!-- 查询条件-->
			<el-card shadow="hover">
				<div class="system-dept-search mb15">
					<el-input size="small" placeholder="请输入公司名称" style="max-width: 180px" v-model="moduleResourcesData.params.keyword" />
					<el-button size="small" type="primary" class="ml10" @click="initModuleResourceData">
						<el-icon>
							<elementSearch />
						</el-icon>
						查询
					</el-button>
				</div>
			</el-card>
			<!--分割线-->
			<el-divider></el-divider>
			<!--数据展示和分页-->
			<el-card shadow="never">
				<template #header>
					<div class="card-header">
						<span>模块资源列表</span>
						<!--新增等操作区域-->
						<el-button size="small" type="success" class="ml10" @click="openAddItemWindows">
							<el-icon>
								<elementDocumentAdd />
							</el-icon>
							新增模块资源
						</el-button>
					</div>
				</template>
				<!--表格展示区-->
				<el-table
					:data="moduleResourcesData.data"
					style="width: 100%"
					row-key="resourceId"
					lazy
					:load="loadChildResource"
					:tree-props="{ children: 'children', hasChildren: 'hasChild' }"
				>
					<el-table-column prop="resourceName" label="资源名称" show-overflow-tooltip width="200">
						<template #default="scope"> <i :class="scope.row.icon"></i>{{ scope.row.resourceName }} </template>
					</el-table-column>
					<el-table-column prop="resourceType" label="资源类型" show-overflow-tooltip align="center" width="80">
						<template #default="scope">
							{{ scope.row.resourceType == 1 ? '目录' : scope.row.resourceType == 2 ? '菜单' : '按钮' }}
						</template>
					</el-table-column>
					<el-table-column prop="isGeneral" label="通用菜单" show-overflow-tooltip width="80" align="center">
						<template #default="scope">
							<el-tag :type="scope.row.isGeneral ? 'success' : 'info'">{{ scope.row.isGeneral ? '是' : '否' }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="path" label="路径" show-overflow-tooltip />
					<el-table-column prop="component" label="组件" show-overflow-tooltip />
					<el-table-column align="center" label="是否必选" prop="mandatory" show-overflow-tooltip width="80">
						<template #default="scope">
							<el-tag :type="scope.row.mandatory ? 'success' : 'info'">{{ scope.row.mandatory ? '是' : '否' }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" show-overflow-tooltip align="center">
						<template #default="scope">
							<el-button size="mini" type="text" @click="openEditItemWindow(scope.row)">修改</el-button>
							<el-popconfirm
								confirm-button-text="删除"
								cancel-button-text="取消"
								icon-color="red"
								title="确定删除这条记录吗？"
								@confirm="delModuleResourceRow(scope.row)"
							>
								<template #reference>
									<el-button size="mini" type="text">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<!--分页-->
				<el-pagination
					@size-change="dictItemTableOnHandleSizeChange"
					@current-change="dictItemTableOnHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30]"
					v-model:current-page="moduleResourcesData.params.pageNo"
					background
					v-model:page-size="moduleResourcesData.params.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="moduleResourcesData.total"
				>
				</el-pagination>
			</el-card>
		</div>
		<AddModule ref="addModuleRef" @initModuleData="initModuleData" />
		<EditModule ref="editModuleRef" @initModuleData="initModuleData" />
		<AddModuleResource ref="addModuleResourceRef" @initModuleResourceData="initModuleResourceData" />
		<EditModuleResource ref="editModuleResourceRef" @initModuleResourceData="initModuleResourceData" />
	</div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { delModule, delModuleResource, getChildResource, getModuleList, getModuleResources } from '/@/api/sys/module/index';
import AddModule from '/@/views/system/module/compoent/addModule.vue';
import EditModule from '/@/views/system/module/compoent/editModule.vue';
import AddModuleResource from '/@/views/system/module/compoent/addModuleResource.vue';
import EditModuleResource from '/@/views/system/module/compoent/editModuleResource.vue';

export default {
	name: 'systemDict',
	components: {
		AddModule,
		EditModule,
		AddModuleResource,
		EditModuleResource,
	},
	setup() {
		const addModuleRef = ref();
		const editModuleRef = ref();
		const addModuleResourceRef = ref();
		const editModuleResourceRef = ref();

		const state = reactive({
			moduleData: {
				data: [],
				total: 0,
				loading: false,
				params: {
					pageNo: 1,
					pageSize: 10,
					moduleName: '',
				},
			},
			moduleResourcesData: {
				data: [],
				total: 0,
				loading: false,
				moduleId: '',
				params: {
					pageNo: 1,
					pageSize: 10,
					keyword: '',
				},
			},
		});

		const loadChildResource = (row: any, treeNode: unknown, resolve: (date: any[]) => void) => {
			getChildResource(row.resourceId).then((res: any) => {
				resolve(res.data);
			});
		};
		// 初始化表格数据
		const initModuleData = () => {
			getModuleList(state.moduleData.params).then((res) => {
				state.moduleData.data = res.data;
				state.moduleData.total = res.extra.total;
				rowClick(res.data[0]);
			});
		};
		// 表格点击事件
		const rowClick = (row: any) => {
			if (row == null) {
				state.moduleResourcesData.data = [];
				state.moduleResourcesData.total = 0;
				return;
			}
			state.moduleResourcesData.moduleId = row['moduleId'];
			initModuleResourceData();
		};
		// 初始化表格数据
		const initModuleResourceData = () => {
			getModuleResources(state.moduleResourcesData.moduleId, state.moduleResourcesData.params).then((res: any) => {
				state.moduleResourcesData.data = res.data;
				state.moduleResourcesData.total = res.data.length;
			});
		};

		//分页大小改变
		const dictTableOnHandleSizeChange = (val: number) => {
			state.moduleData.params.pageSize = val;
			initModuleData();
		};
		// 分页改变
		const dictTableOnHandleCurrentChange = (val: number) => {
			state.moduleData.params.pageNo = val;
			initModuleData();
		};

		//分页大小改变
		const dictItemTableOnHandleSizeChange = (val: number) => {
			state.moduleResourcesData.params.pageSize = val;
			initModuleResourceData();
		};
		// 分页改变
		const dictItemTableOnHandleCurrentChange = (val: number) => {
			state.moduleResourcesData.params.pageNo = val;
			initModuleResourceData();
		};

		// 打开新增字典项弹窗
		const openAddWindows = () => {
			addModuleRef.value.openWindows();
		};
		// 打开编辑字典弹窗
		const openEditWindow = (row: any) => {
			editModuleRef.value.openWindows(row.moduleId);
		};

		const delRow = (row: any) => {
			delModule(row.moduleId).then(() => {
				initModuleData();
			});
		};

		// 打开新增字典项弹窗
		const openAddItemWindows = () => {
			addModuleResourceRef.value.openWindows(state.moduleResourcesData.moduleId);
		};
		// 打开编辑字典项弹窗
		const openEditItemWindow = (row: any) => {
			editModuleResourceRef.value.openWindows(row.resourceId);
		};

		const delModuleResourceRow = (row: any) => {
			delModuleResource(row.resourceId).then(() => {
				initModuleResourceData();
			});
		};

		// 页面加载时
		onMounted(async () => {
			initModuleData();
		});

		return {
			addModuleRef,
			editModuleRef,
			addModuleResourceRef,
			editModuleResourceRef,
			loadChildResource,
			rowClick,
			initModuleData,
			initModuleResourceData,
			dictTableOnHandleSizeChange,
			dictTableOnHandleCurrentChange,
			dictItemTableOnHandleSizeChange,
			dictItemTableOnHandleCurrentChange,
			openAddWindows,
			openEditWindow,
			delRow,
			openAddItemWindows,
			openEditItemWindow,
			delModuleResourceRow,
			...toRefs(state),
		};
	},
};
</script>

<style scoped></style>
